<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;800&display=swap" rel="stylesheet">
    <script src="chart.js"></script>
    <script>
        const totalErr = parseInt('{{ERRORS}}'.replace(/ /g, ''));
        const totalWrn = parseInt('{{WARNINGS}}'.replace(/ /g, ''));
        const totalScs = parseInt('{{SUCCESS}}'.replace(/ /g, ''));
    </script>
    <title>Cats</title>
</head>
<body>
<div class="banner-component">
    <div class="flex-items-center">
        <img src="./assets/clock-wise.svg" alt="version">
        <span class="left">
				Generated with CATS {{VERSION}} on {{OS}}
			</span>
    </div>
    <div class="flex-items-center">
        <img src="./assets/clock.svg" alt="timestamp">
        <span>
				{{TIMESTAMP}}
			</span>
    </div>
</div>
<header>
    <div class="logo">
        <img class="logo-white" src="./assets/cats-logo-dark.svg" alt="White Logo">
        {{#JS}}
        <img class="logo-dark" src="./assets/cats-logo-white.svg" alt="Dark Logo">
        {{/JS}}
    </div>
    <div class="theme-toggle">
        <button id="theme-toggle"  style="display: none;">
            <img class="theme-icon-light" src="./assets/white-mode-icon.svg" alt="Light Theme Icon">
            <img class="theme-icon-dark" src="./assets/dark-mode-icon.svg" alt="Dark Theme Icon">
        </button>
    </div>
</header>
<main class="container">
    <h2 class="title-section">Overview</h2>
    <div class="grid">
        <div class="card-wrapper">
            <div class="card-header">
                <div>
                    <h2 class="action-tag">Total Tests Run</h2>
                    <p class="big-number">{{TOTAL}} tests</p>
                </div>
            </div>
            {{#JS}}
                <div class="chart-container">
                    <canvas id="myChart"></canvas>
                    <div id="legend-container"></div>
                </div>
                <script src="draw_chart.js"></script>
            {{/JS}}
            {{^JS}}
                <div>
                    <div class="chart-container">
                        <div class="chart">
                            <div class="chart-inner">
                                <div class="chart-bar" style="width: {{ERROR_PERCENTAGE}}%"></div>
                                <div class="chart-bar" style="width: {{WARN_PERCENTAGE}}%"></div>
                                <div class="chart-bar" style="width: {{SUCCESS_PERCENTAGE}}%"></div>
                            </div>
                        </div>
                        <div class="chart-labels">
                            <div class="chart-label">Errors {{ERRORS}}</div>
                            <div class="chart-label">Warnings {{WARNINGS}}</div>
                            <div class="chart-label">Success {{SUCCESS}}</div>
                        </div>
                    </div>
                </div>
            {{/JS}}
        </div>
        <div class="grid">
            <div class="card-wrapper icon-card">
                <div class="icon">
                    <img src="./assets/time.svg" alt="execution time" class="time-white">
                    <img src="./assets/time_dark.svg" alt="execution time" style="display: none;" class="time-dark">
                </div>
                <div>
                    <h2 class="action-tag no-top">Execution Time</h2>
                    <p class="big-number">{{EXECUTION}}</p>
                    <div style="margin: 5px;"></div>
                    <h2 class="action-tag">Average Response Time</h2>
                    <p class="big-number">{{AVERAGE_RESPONSE_TIME}}ms</p>
                </div>
            </div>
            <div class="card-wrapper icon-card">
                <div class="icon">
                    <img src="./assets/methods.svg" alt="execution time" class="methods-white">
                    <img src="./assets/methods_dark.svg" alt="execution time" style="display: none;" class="methods-dark">
                </div>
                <div>
                    <h2 class="action-tag no-top">Http Methods in scope</h2>
                    {{#HTTP_METHODS}}
                        <span class="active rounded rounded-{{.}} small-margin">{{.}}</span>
                    {{/HTTP_METHODS}}
                </div>
            </div>
            <div class="card-wrapper icon-card">
                <div class="icon">
                    <img src="./assets/fuzzers.svg" alt="execution time" class="fuzzers-white">
                    <img src="./assets/fuzzers_dark.svg" alt="execution time" style="display: none;" class="fuzzers-dark">
                </div>
                <div>
                    <h2 class="action-tag no-top">Fuzzers run</h2>
                    <p class="big-number"><span class="orange_text">{{FUZZERS}}</span> <span style="color: #9ca3af; font-size: 18px;">out of</span> {{TOTAL_FUZZERS}}</p>
                    <div style="margin: 5px;"></div>
                    <h2 class="action-tag">Paths included</h2>
                    <p class="big-number"><span class="orange_text">{{PATHS}}</span> <span style="color: #9ca3af; font-size: 18px;">out of</span> {{TOTAL_PATHS}}</p>
                </div>
            </div>
            <div class="card-wrapper icon-card">
                <div class="icon">
                    <img src="./assets/link.svg" alt="execution time" class="link-white">
                    <img src="./assets/link_dark.svg" alt="execution time" style="display: none;" class="link-dark">
                </div>
                <div>
                    <h2 class="action-tag no-top">Base path</h2>
                    <p class="small-margin link_text">{{BASE_URL}}</p>
                    <div style="margin: 5px;"></div>
                    <h2 class="action-tag">Spec file name</h2>
                    <p class="small-margin link_text">{{CONTRACT_NAME}}</p>
                </div>
            </div>
        </div>
    </div>
    <h2 class="title-section">Execution Details</h2>
    <div class="ran-tests-component">
        <div id="summary">
            <div class="summary-container">
                <span class="menu-total menu active" data-filtered="All">All <button type="button" data-filtered="All">{{TOTAL}}</button></span>
                <span class="menu-error menu" data-filtered="error">Errors <button type="button" data-filtered="error">{{ERRORS}}</button></span>
                <span class="menu-warning menu" data-filtered="warn">Warnings <button type="button" data-filtered="warn">{{WARNINGS}}</button></span>
                <span class="menu-success menu" data-filtered="success">Success <button type="button" data-filtered="success">{{SUCCESS}}</button></span>
            </div>
            {{#JS}}
            <div class="search-container">
                <input type="text" class="search-input" placeholder="Search...">
                <button class="search-clear-btn" onclick="clearSearch()">Clear</button>
                <img class="search-icon" src="./assets/magnifying-glass.svg" alt="Search Icon">
            </div>
            {{/JS}}
        </div>
        <div class="table-container">
            <table id="summaryTable">
                <thead>
                <tr class="header">
                    <th style="width: 5%">ID</th>
                    <th style="width: 25%">Fuzzer</th>
                    <th style="width: 50%">Scenario</th>
                    <th style="width: 6%">Result</th>
                    <th style="width: 15%">Result Reason</th>
                </tr>
                </thead>
                <tbody>
                {{#TEST_CASES}}
                <tr data-id="{{key}}" class="{{key}}" onclick="window.open('{{key}}.html','_blank')">
                    <td><a href="{{key}}.html" target="_blank">{{id}}</a></td>
                    <td><a href="{{key}}.html" target="_blank">{{fuzzer}}</a></td>
                    <td><a href="{{key}}.html" target="_blank"><span class="active rounded rounded-{{httpMethod}}">{{httpMethod}}</span><span
                            class="active rounded path">{{path}}</span><span class="scenario">{{scenario}}</span></a></td>
                    <td><a href="{{key}}.html" target="_blank"><label class="test-result result-{{result}}">{{result}}</label></a></td>
                    <td>
                        {{#switchedResult}}
                        <span class="result-warn"> ⚠ </span>
                        {{/switchedResult}}
                        <a href="{{key}}.html" target="_blank">&nbsp;{{resultReason}}</a>
                    </td>
                </tr>
                {{/TEST_CASES}}
                </tbody>
            </table>
        </div>
    </div>
</main>
{{#JS}}
<script src="script.js"></script>
{{/JS}}
</body>
</html>